<template>
  <q-page class="q-pa-md">
    <q-btn v-if="props.showBackToHomeBtn" class="float-right" color="primary" icon="arrow_back" outline title="返回"
      to="/" />
    <div class="q-pb-md text-h5">{{pageTitle}}</div>
    <div class="q-pa-md shadow-2" style="max-width: 400px;margin: 0 auto">
      <div class="avatar-area">
        <div class="avatar-container"><img alt="avatar" class="avatar-image" :src="avatarImageUrl"></div>
      </div>
      <div class="text-h6 row justify-center">
        {{ua.displayName}}
      </div>
      <q-separator />
      <div class="row justify-between q-py-sm">
        <div class="text-h7">{{$t('用户名')}}</div>
        <div>{{$d.userInfo.userName}}</div>
      </div>
      <q-separator />
      <div class="row justify-between q-py-sm">
        <div class="text-h7">{{$t('角色')}}</div>
        <div>{{$d.userInfo.rolesString}}</div>
      </div>
      <q-separator />
      <div class="row justify-between q-py-sm">
        <div class="text-h7">Email</div>
        <div>{{$d.userInfo.email}}</div>
      </div>
      <q-separator v-if="props.internalTagsType>0" />
      <div class="row justify-between q-py-sm" v-if="props.internalTagsType>0">
        <div class="text-h7">{{$t(props.internalTagsLabel)}}</div>
        <div>{{internalTagsDisp}}</div>
      </div>

      <q-separator />
      <div class="row justify-between q-pt-sm">
        <div class="text-h7">{{$t('操作')}}</div>
        <div class="row">
          <q-btn unelevated color="primary" no-caps
            :to="'/comm/auth/change-password?reurl='+ encodeURIComponent(currPath)">
            {{$t('修改密码')}}
          </q-btn>
          <q-btn no-caps v-close-popup unelevated class="float-right q-ml-sm" color="negative" @click="logout">{{$t('登出')}}
          </q-btn>
        </div>
      </div>
    </div>
  </q-page>
</template>
<script lang="ts">
export default {
  name: 'myProfileStd',
}
</script>

<script lang="ts" setup>
import {computed, reactive} from 'vue'
import {UserInfo} from '../../defs/user'
import {GenericDropdownListItem} from '../../defs/comm'
import _ from 'lodash'
//@ts-ignore
import defaultAvatar from '../../assets/default-avatar.jpg'
import {useI18n} from 'vue-i18n'
import {useTitleHelper} from 'src/lib/hooks/titleHelper'

const {t} = useI18n()

const pageTitle = t('我的资料')
useTitleHelper(pageTitle)
const ua = $f.ua

interface PropsDef {
  //显示退回首页的按钮
  showBackToHomeBtn?: boolean
  //内部标志类型：0-不显示 其它-显示
  internalTagsType?: number
  //内部标志的下拉数据
  internalTagsData?: GenericDropdownListItem[]
  //内部标志位栏位的标签
  internalTagsLabel?: string
}

const props = withDefaults(defineProps<PropsDef>(), {
  showBackToHomeBtn: false,
  internalTagsType: 0,
  internalTagsData: () => [],
  internalTagsLabel: '内部标志位',
})

const avatarImageUrl = defaultAvatar

const logout = function () {
  if ($f.ua) {
    $f.ua = null
    $f.rr = null
    $f.unreadMsgNum.value = 0
    localStorage.removeItem('ua')
    localStorage.removeItem('rr')
    localStorage.removeItem('unreadMsgNum')
    sessionStorage.clear()
    $f.router.go(0)
  }
  void $f.router.push('/comm/auth/login')
}

const $d = reactive({
  userInfo: {} as UserInfo,
})

const internalTagsDisp = computed(() => {
  const tagItem = _.find(props.internalTagsData, function (o) {
    return o.value == $d.userInfo.internalTags
  })
  if (tagItem && tagItem.label) {
    return t(tagItem.label)
  } else {
    return ''
  }
})

const currPath = $f.router.currentRoute.value.path

const loadMyProfileData = function () {
  // 获取
  $f.axios
    .get<UserInfo>('/comm/auth/get-my-info')
    .then((result) => {
      $d.userInfo = result.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
}

loadMyProfileData()

</script>

<style lang="sass" scoped>
.avatar-area
  width: 94px
  height: 94px
  border: 3px solid #c5c5c5
  margin: 0 auto
  border-radius: 50%

.avatar-container
  width: 88px
  height: 88px
  border-radius: 50%
  border: 3px solid white
  overflow: hidden

.avatar-image
  width: 100%
  background-repeat: no-repeat
  background-size: cover
</style>
